window.onload = function (){
    var oli = document.querySelectorAll('.ul1 li'),
    dia = document.querySelectorAll('.ul2 li'),
    right = document.querySelector('.right'),
    left = document.querySelector('.left'),
    index = 0;
    var dingshi;
    function forin(){
        for(var i = 0;i<oli.length;i++){
            oli[i].style.cssText = 'opacity:0';
            dia[i].style.cssText = 'opacity:0.5';
        }
        oli[index].style.cssText = 'opacity:1';
        dia[index].style.cssText = 'opacity:1';
    }
    ding();
    function ding(){
        dingshi = setInterval(function(){
            index++;
            if(index > oli.length-1){
                index=0;
            }
            forin();
        },3000)
    }
    right.onclick = function(){
        clearInterval(dingshi);
        index++;
        if(index > oli.length-1){
            index=0;
        }
        forin();
        ding();
    }
    left.onclick = function(){
        clearInterval(dingshi);
        index--;
        if(index < 0){
            index=oli.length-1;
        }
        forin();
        ding();
    }
    dia[0].onclick = function(){
        clearInterval(dingshi);
        index = 0;
        forin();
        ding();
    }
    dia[1].onclick = function(){
        clearInterval(dingshi);
        index = 1;
        forin();
        ding();
    }
    dia[2].onclick = function(){
        clearInterval(dingshi);
        index = 2;
        forin();
        ding();
    }
    dia[3].onclick = function(){
        clearInterval(dingshi);
        index = 3;
        forin();
        ding();
    }
}